<template>
  <div class="editor-content-pad">
    <template v-if="acFlag !== 'background'">
      <MBaseConfig />
      <component v-for="c in configComponent" :key="c" :is="c" />
    </template>
  </div>
</template>
<script>
import MBaseConfig from './configuration/MBaseConfig.vue'
import MBackground from './configuration/MBackground.vue';
import MLegend from './configuration/MLegend.vue';
import MLineConfig from './configuration/MLineConfig.vue';
import MTitleConfig from './configuration/MTitleConfig.vue';
import MXAxis from './configuration/MXAxis.vue';
import MYAxis from './configuration/MYAxis.vue';
export default {
  name: 'ContentPad',
  data(){
    return{
      acFlag:'background',
      configComponent:[]
    }
  },
  methods:{

  },
  computed: { 
    acFlagType(){
      return this.$store.state.imageDragMoudules.acFlag.type;
    },
    acComponentConfig(){
      const acComponent = this.$store.state.imageDragMoudules.acComponent;
      let acComponentConfig = null;
      if(acComponent != null){
        acComponentConfig = acComponent.config;
      }
      return acComponentConfig;
    }
  },
  watch:{
    acFlagType:{
      handler(newVal, oldVal) {
        this.acFlag = newVal;
        console.log("contentpad-watch-acFlag",this.acFlag);
      },
      deep: true,
      immediate: true
    },
    acComponentConfig:{
      handler(newVal, oldVal) {
        //console.log("contentpad-watch-acComponentConfig",newVal);
        if (!!newVal) {
          this.configComponent = newVal.map(
            (o) => `M${o.replace(o[0], o[0].toUpperCase())}`
          );
          console.log("进入到if：",this.configComponent);
        } else {
          this.configComponent = [];
        }
      },
      deep: true,
      immediate: true
    }
  },
  components: { 
    MBaseConfig,
    MBackground,
    MLegend,
    MLineConfig,
    MTitleConfig,
    MXAxis,
    MYAxis
  },
}
</script>


